<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.7 vue.js开源框架介绍</title>
    <!--引入./js/vue.global.js-->
    <script src="js/vue.global.js"></script>
    <!--导入css下面的样式-->
    <link rel="stylesheet" href="css/bootstrap.min.css">

  
</head>
<div id="app" class="container">
<body>
    <h1>2.6 动态脚本js介绍</h1>
    <span>显示输入的内容：{{loginForm.username}}</span>
    <!--表单，用户名和密码-->
    <form action="#">
        <label for="username">用户名：</label>
        <input type="text" v-model="loginForm.username">
        <br>
        <label for="password">密    码：</label>
        <input type="password" v-model="loginForm.password">
        <br>
        <input type="submit" class="form-control" value="提交" @click="login">
    </form>
    <div style="width: 300px;border:solid 1px">
        <from>
            <div class="mb-3">
                <label for="formGroupExampleInput" class="form-label">用户名</label>
                <input type="text" class="form-control" id="formGroupExampleInput" placeholder="请输入用户名">
            </div>
            <div class="mb-3">
                <label for="formGroupExampleInput2" class="form-label">密码</label>
                <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="请输入密码">
            </div>
            <input type="submit" class="form-control" value="提交" @click="login">
        </from>
    </div>
    
   
 </body>
</div> 
<script>
    // 导入vue.js
    const {createApp,ref,reactive} = Vue;
    // 创建应用实例
    const app = createApp({
        setup(){
            // 定义响应式数据
            const loginForm= reactive({
                username:"",
                password:"" 
            });
            // 定义函数
            const login = () => {
                console.log("===执行login函数==="); // 输出提示信息
                console.log("username:",loginForm.username); // 输出用户名
                console.log("password:",loginForm.password); // 输出密码 
                console.log("输入参数：",loginForm.username,loginForm.password); // 输出提示信息
                if (loginForm.username === "admin" && loginForm.password === "123456") { // 判断用户名和密码是否正确
                    alert("登录成功"); // 弹出提示框
                } else { // 否则
                    alert("登录失败"); // 弹出提示框
                }
            }
            // 返回
            return{
                loginForm,
                login 
            }

         
        }
    });
    // 挂载应用实例到HTML元素上
    app.mount("#app");
   
    
    

</script> 
</html>